<template>
  <div class="my-upload">
    <!-- :limit="limit"
    :on-exceed="handleExceed" -->
    <el-upload
      :action="baseUrl + url"
      :before-upload="handleBeforeUpload"
      :data="data"
      :on-error="handleUploadError"
      :on-success="handleUploadSuccess"
      :on-warning="handleUploadWarning"
      :show-file-list="false"
      :headers="headers"
      class="uploader"
      ref="fileUpload"
      v-if="!disabled"
    >
      <!-- 镂空上传按钮 -->
      <el-button 
        type="success" 
        icon="Upload" 
        plain
      >
        {{ buttonName }}
      </el-button>
    </el-upload>
  </div>
</template>

<script setup>
import { getToken } from "@/utils/auth"

const baseUrl = import.meta.env.VITE_APP_BASE_API

const props = defineProps({
  // 上传接口地址（必传）
  url: {
    type: String,
    required: true
  },
  // 按钮名称
  buttonName: {
    type: String,
    default: "上传文件"
  },
  // 上传携带的参数
  data: {
    type: Object,
    default: () => ({})
  },
  // 数量限制
  // limit: {
  //   type: Number,
  //   default: 1
  // },
  // 大小限制(MB)
  // fileSize: {
  //   type: Number,
  //   default: 5
  // },
  // 文件类型, 例如['png', 'jpg', 'jpeg']
  fileType: {
    type: Array,
    default: () => ["doc", "docx", "xls", "xlsx", "ppt", "pptx", "txt", "pdf"]
  },
  // 禁用组件
  disabled: {
    type: Boolean,
    default: false
  }
})

const { proxy } = getCurrentInstance()
const emit = defineEmits(['success', 'error', 'warning'])
const headers = ref({ Authorization: "Bearer " + getToken() })

// 上传前校检格式和大小
function handleBeforeUpload(file) {
  // 校检文件类型
  if (props.fileType.length) {
    const fileName = file.name.split('.')
    const fileExt = fileName[fileName.length - 1]
    const isTypeOk = props.fileType.indexOf(fileExt) >= 0
    if (!isTypeOk) {
      proxy.$modal.msgError(`文件格式不正确，请上传${props.fileType.join("/")}格式文件!`)
      return false
    }
  }
  
  // 校检文件大小
  // if (props.fileSize) {
  //   const isLt = file.size / 1024 / 1024 < props.fileSize
  //   if (!isLt) {
  //     proxy.$modal.msgError(`上传文件大小不能超过 ${props.fileSize} MB!`)
  //     return false
  //   }
  // }
  
  proxy.$modal.loading("正在上传文件，请稍候...")
  return true
}

// 文件个数超出
function handleExceed() {
  proxy.$modal.msgError(`上传文件数量不能超过 ${props.limit} 个!`)
}

// 上传失败
function handleUploadError(err) {
  proxy.$modal.msgError("上传文件失败")
  emit('error', err)
}

const handleUploadWarning = (warn) => {
  proxy.$modal.closeLoading()
  emit('warning', warn)
}

// 上传成功回调
function handleUploadSuccess(res) {
  proxy.$modal.closeLoading()
  if (res.code === 200) {
    proxy.$modal.msgSuccess(res.msg || "上传成功")
    emit('success', res)
  } else {
    proxy.$modal.msgError(res.msg || "上传失败")
    emit('error', res)
  }
}
</script>

<style scoped lang="scss">
.my-upload {
  .uploader {
    display: inline-block;
  }
}
</style>
